<template>
  <view class="help-container">
    <!-- 顶部导航栏 -->
    <index-nav-bar title="帮助中心" :showBack="true" />
    <!-- 帮助内容 -->
    <view class="help-content">
      <!-- 常见问题 -->
      <view class="section">
        <view class="section-title">常见问题</view>
        <view class="faq-list">
          <view v-for="(item, index) in filteredFaq" :key="index" class="faq-item">
            <view class="faq-question" @tap="toggleFaq(index)">
              <text>{{ item.question }}</text>
              <view :class="{'arrow-icon': true, 'rotate': faqOpenIndex === index}"></view>
            </view>
            <view class="faq-answer" v-show="faqOpenIndex === index">
              <text>{{ item.answer }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 联系我们 -->
      <view class="section">
        <view class="section-title">联系我们</view>
        <view class="contact-card">
          <view class="contact-item">
            <text>客服电话: 李老师 15010799038</text>
          </view>
          <view class="contact-item">
            <text>工作时间: 每天9点~21点</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text>© 2025 小虎点点 版权所有</text>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
      return {
        searchQuery: '',
        faqOpenIndex: -1,
        faqList: [
          {
            question: '如何注册账号？',
            answer: '打开应用后，点击"我的"页面，点击手机号快捷登录即可注册完成。'
          },
          {
            question: '忘记密码怎么办？',
            answer: '应用通过手机微信绑定的手机号自动登录，无需密码登录。'
          },
          {
            question: '如何修改个人信息？',
            answer: '进入"我的"页面，点击头像或用户名，进入个人信息页面即可修改。'
          },
          {
            question: '如何查看订单？',
            answer: '进入"我的"页面，点击"我的订单"即可查看所有订单信息。'
          },
          {
            question: '如何联系客服？',
            answer: '您可以通过帮助中心的"联系我们"部分获取客服联系方式。'
          }
        ]
      };
    },
    computed: {
      filteredFaq() {
        if (!this.searchQuery) {
          return this.faqList;
        }
        return this.faqList.filter(item => 
          item.question.toLowerCase().includes(this.searchQuery.toLowerCase()) || 
          item.answer.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      }
    },
    methods: {
      toggleFaq(index) {
        if (this.faqOpenIndex === index) {
          this.faqOpenIndex = -1;
        } else {
          this.faqOpenIndex = index;
        }
      },
      handleSearch() {
        // 搜索逻辑已在computed中处理
      }
    }
	}
</script>

<style scoped>
  .help-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 60rpx;
  }

  /* 搜索框样式 */
  .search-box {
    position: relative;
    margin: 20rpx;
    padding: 0 20rpx;
    height: 80rpx;
    background-color: #ffffff;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333333;
  }

  .search-icon {
    width: 40rpx;
    height: 40rpx;
    margin-left: 10rpx;
  }

  /* 内容区域样式 */
  .help-content {
    padding: 0 20rpx;
  }

  .section {
    margin-bottom: 30rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin: 20rpx 0;
    padding-left: 20rpx;
    border-left: 6rpx solid #07c160;
  }

  /* FAQ列表样式 */
  .faq-list {
    background-color: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .faq-item {
    border-bottom: 1rpx solid #f0f0f0;
  }

  .faq-item:last-child {
    border-bottom: none;
  }

  .faq-question {
    padding: 28rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;
    color: #333333;
  }

  .arrow-icon {
    width: 36rpx;
    height: 36rpx;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23999999' d='M869 288.01L550.2 607.2c-10.4 10.4-25.8 10.4-36.2 0L155 288.01c-14.7-14.7-1.2-39.9 18.1-39.9h669.7c19.4 0 32.8 25.1 18.1 39.9z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s;
  }

  .rotate {
    transform: rotate(180deg);
  }

  .faq-answer {
    padding: 0 30rpx 28rpx;
    font-size: 28rpx;
    color: #666666;
    line-height: 1.6;
  }

  /* 联系我们样式 */
  .contact-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .contact-item:last-child {
    margin-bottom: 0;
  }

  .contact-icon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 20rpx;
  }

  .contact-item text {
    font-size: 28rpx;
    color: #666666;
  }

  /* 底部样式 */
  .footer {
    margin-top: 60rpx;
    padding: 20rpx;
    text-align: center;
    font-size: 26rpx;
    color: #999999;
  }
</style>
